<template>
  <div class="resource-info-wrap">
    <el-tooltip v-if="resourceName" :open-delay="800" class="item" placement="top-start" effect="dark">
      <div slot="content" style="max-width: 200px;">
        <div>{{ appendResourceId }}</div>
        <div style="color: #999; font-size: 12px; margin-top: 5px; margin-bottom: 3px">
          {{ appendTipResourceInfo }}
        </div>
      </div>
      <div class="resource-name ellipsisOne">
        <template v-if="resourceNameCanClick && resourceAccountId">
          <span class="click-text" @click.stop="goResourceDetail">{{ resourceName }}</span>{{ appendOrganization }}
        </template>
        <template v-else>
          {{ resourceName + appendOrganization }}
        </template>
      </div>
    </el-tooltip>
    <div v-else class="resource-name ellipsisOne">--</div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'ResourceInfo',
  props: {
    resourceName: { // 资源名称
      type: String,
      default: ''
    },
    accountNameOrganization: { // 所属机构
      type: String,
      default: ''
    },
    accountNamePlatform: { // 平台
      type: String,
      default: ''
    },
    accountBelongName: { // 账号归属
      type: String,
      default: ''
    },
    resourceId: { // 账号id
      type: String,
      default: ''
    },
    isShowResourceId: { // 文本是否显示资源id， tip还是会显示
      type: Boolean,
      default: true
    },
    resourceAccountId: { // 账号id
      type: Number,
      default: null
    },
    resourceNameCanClick: { // 点击账号名称跳转
      type: Boolean,
      default: false
    }
  },
  computed: {
    appendOrganization() {
      const i = (this.resourceId === 'none' || !this.isShowResourceId || !this.resourceShowId) ? '' : (this.resourceId ? `${this.resourceId}` : '--');
      const p = (this.accountNamePlatform === 'none' || !this.resourceIsShowPlatform) ? '' : (this.accountNamePlatform ? `${this.accountNamePlatform}` : '--');
      const o = (this.accountNameOrganization === 'none' || !this.resourceIsShowOrgan) ? '' : (this.accountNameOrganization ? `${this.accountNameOrganization}` : '--');
      // const b = this.accountBelongName ? `${this.accountBelongName}` : '--';
      if (i || p || o) {
        return ` [ ${p}${(o && p || p && i) ? ' | ' : ''}${o}${i && o ? ' | ' : ''}${i} ]`;
      } else {
        return '';
      }
      // return i + p + o + b;
    },
    appendResourceId() {
      if (this.resourceId !== 'none' && this.resourceShowId) {
        return `${this.resourceName}（ ${this.resourceId ? this.resourceId : '--'} ）`;
      }
      return `${this.resourceName}`;
    },
    appendTipResourceInfo() {
      const p = (this.accountNamePlatform === 'none' || !this.resourceIsShowPlatform) ? '' : (this.accountNamePlatform ? `${this.accountNamePlatform}` : '--');
      const o = (this.accountNameOrganization === 'none' || !this.resourceIsShowOrgan) ? '' : (this.accountNameOrganization ? `${this.accountNameOrganization}` : '--');
      const b = this.accountBelongName === 'none' ? '' : (this.accountBelongName ? `${this.accountBelongName}` : '--');
      return p + (o && p ? ' | ' : '') + o + (b ? ' | ' : '') + b;
    },
    ...mapGetters([
      'resourceIsShowPlatform',
      'resourceIsShowOrgan',
      'resourceShowId'
    ])
  },
  methods: {
    goResourceDetail() {
      const url = this.$router.resolve({
        name: 'detailResource',
        params: { resourceId: this.resourceAccountId }
      });
      window.open(url.href, '_blank');
    }
  }
};
</script>
<style lang="scss" scoped>
.resource-info-wrap {
  // float: left;
  max-width: 100%;
  .resource-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .click-text {
      cursor: pointer;
      color: #406eff;
    }
  }
}
</style>
